<template>
  <div class="shopping-container">
    <h1>欢迎来到购物页面</h1>
    <!-- 新增的头栏 -->
    <div class="header-bar"></div>
    <!-- 使用 flex 布局管理侧栏和内容区域 -->
    <div class="sidebar-content-wrapper">
      <div class="sidebar">
        <!-- 侧栏内容，可以根据需要添加 -->
      </div>
      <div class="content-area">
        <!-- 轮播图移至content-area内部 -->
        <ElCarousel 
          height="300px" 
          arrow="always" 
          indicator-position="outside"
          :autoplay="true"
          :interval="3000"
        >
          <ElCarouselItem v-for="(item, index) in carouselItems" :key="index">
            <img :src="item.imageUrl" alt="轮播图" class="carousel-image">
          </ElCarouselItem>
        </ElCarousel>
        <p>这里是商品展示区域</p>
        <!-- 商品列表或其他内容 -->
      </div>
    </div>
    <p>这里是购物车功能</p>
    <!-- 购物页面内容 -->
  </div>
</template>

<script>
import { ref } from 'vue';
import { ElCarousel, ElCarouselItem } from 'element-plus';

export default {
  name: 'Shopping',
  components: {
    ElCarousel,
    ElCarouselItem
  },
  setup() {
    const carouselItems = ref([
      { imageUrl: 'https://picsum.photos/800/300?random=1' },
      { imageUrl: 'https://picsum.photos/800/300?random=2' },
      { imageUrl: 'https://picsum.photos/800/300?random=3' },
      { imageUrl: 'https://picsum.photos/800/300?random=4' }
    ]);

    return {
      carouselItems
    };
  }
};
</script>

<style scoped>
.shopping-container {
  padding: 20px;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.header-bar {
  height: 80px;
  width: 100%;
  background-color: #f0f0f0;
  margin-top: 10px;
}

.sidebar-content-wrapper {
  display: flex;
  margin-top: 10px;
}

.sidebar {
  width: 200px;
  height: 800px;
  background-color: #e0e0e0;
}

.content-area {
  width: 1200px;
  height: 800px;
  background-color: #f9f9f9;
  padding: 10px;
  margin-left: 10px; /* 与侧栏保持间距 */
}
</style>
  